<template>
    <div class="bottomBox">
        <ul class="bottomUl">
            <li><a href="" class="first">首页</a></li>
            <div class="hengXian"></div>
            <li id="list">
<!--                课程分类-->
<!--                    <a-icon type="down" />-->

<!--                <ul id="listUl">-->
<!--                    <li v-for="(item) in courseList" :key="item.subjectId">{{item.subjectTitle}}</li>-->
<!--                </ul>-->

                <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                        课程分类 <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay"  >
                        <a-menu-item v-for="(item) in courseList" :key="item.subjectId" class="listUlLi">
                            {{item.subjectTitle}}
                        </a-menu-item>

                    </a-menu>
                </a-dropdown>
            </li>
            <li>专属课程</li>
        </ul>
    </div>
</template>

<script>
    // import $ from 'jquery'
    export default {
        name: "Select",
        data(){
            return{
                courseList:[]
            }
        },
        created(){
            // let urlParamter= new URLSearchParams()
            // urlParamter.append('enable',1)
            this.$axios.post("http://wkt.myhope365.com/weChat/applet/subject/list",{enable:1}).then((res)=>{
                this.courseList = res.data.rows
                // $("#list").mouseover(()=>{
                //     $("#listUl").css("display","block")
                // })
                // $("#list").mouseout(()=>{
                //     $("#listUl").css("display","none")
                // })
            })
        }
    }
</script>

<style scoped>
    li{
        list-style: none;
    }

    .bottomBox{
        position: absolute;
        left: 0;
        top: 84px;
        margin-top: 20px;
        height: 30px;
    }
    .bottomBox:hover{
        cursor: pointer;
    }
    .bottomUl{
        position: relative;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
    }
    .bottomUl a{
        color: black;
    }
    .first{
        color: #00cf8c !important;
    }
    .bottomUl a:hover{
        color: #00cf8c;
        text-decoration: none;
    }
    .bottomUl>li{
        float: left;
        margin-right: 30px;
        height: 24px;
        font-size: 14px;
        line-height: 30px;
    }
    .bottomUl>li{
        transition: color 0.4s;
    }
    .bottomUl>li:hover{
        color: rgb(0, 207, 140) !important;
    }
    #list img{
        width: 12px;
        height: 15px;
    }
    .hengXian{
        position: absolute;
        left: 8px;
        bottom: 0;
        width: 16px;
        height: 2px;
        background-color: #00cf8c;
    }
    #list{
        position: relative;
    }
    #list:focus{
        text-decoration: none;
    }
    .listUlLi{
        color: #999;
        font-size: 13px;
    }
    .listUlLi{
        transition: color 0.4s;
        margin: 3px 0;
        transition: background-color 0.4s;
    }
    .listUlLi:hover{
        background-color: rgba(0, 207, 140,0.1);
        color: rgb(0, 207, 140);
        cursor: pointer;
    }
</style>